<meta charset="utf-8">
<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="/manager"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">考试管理</a></li>
        <li class="active">题库录入</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <div class="box-body">
            <form id="questionForm" class="form-horizontal">
                <input id="questionContent" type="hidden" name="content">
                <div class="col-lg-8 pl0">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <textarea type="text" rows="3" class="form-control" id="title" name="title" placeholder="请输入题目标题" require=""></textarea>
                        </div>
                    </div>
                    <div class="form-group form-editor">
                        <div class="col-xs-12" >
                            <textarea id="questionField"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 question-extra">
                	<div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">课程分类:</label>
                            <div class="ml80">
                                <select id="subject-select" class="form-control" name="subjectId" require=""></select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">题目类型:</label>
                            <div class="radio icheck ml80 radioItem">
                                <label style="margin-bottom: 5px">
                                    <input class="minimal"  type="radio"  name="questionType" checked  value="0" > 单项选择题
                                </label>
                                <label class="ml20">
                                    <input class="minimal"  type="radio"  name="questionType" value="1"> 多项选择题
                                </label>
                                <label>
                                    <input class="minimal"  type="radio"  name="questionType" value="2"> 主观问答题
                                </label>
                                <label class="ml20">
                                    <input class="minimal"  type="radio"  name="questionType" value="3"> 编程题
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="option-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">题目选项:</label>
                            <div class="ml80 mb5">
                                <input type="text" class="form-control" name="optionA" placeholder="选项A" require="">
                            </div>
                            <div class="ml80 mb5">
                                <input type="text" class="form-control" name="optionB" placeholder="选项B" require="">
                            </div>
                            <div class="ml80 mb5">
                                <input type="text" class="form-control" name="optionC" placeholder="选项C" require="">
                            </div>
                            <div class="ml80 mb5">
                                <input type="text" class="form-control" name="optionD" placeholder="选项D" require="">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">题目分值:</label>
                            <div class="ml80">
                                <input type="text"  class="form-control" name="score" placeholder="题目分值" require="">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">题目难度:</label>
                            <div class="ml80">
                                <select class="form-control" name="difficulty" require="">
		                            <option value="">请选择</option>
		                            <option value="1">一颗星</option>
		                            <option value="2">两颗星</option>
		                            <option value="3">三颗星</option>
		                            <option value="4">四颗星</option>
		                            <option value="5">五颗星</option>
                        		</select>
                            </div>
                        </div>
                    </div>
                 	<div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">正确答案:</label>
                            <div class="ml80">
                                <textarea type="text" rows="1" class="form-control" name="answer" require="" placeholder="正确答案"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">答案解析:</label>
                            <div class="ml80">
                                <textarea type="text" rows="4" class="form-control" name="parse" require="" placeholder="答案解析"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 0px">
                        <div class="col-xs-12">
                        	<label class="control-label label-four"></label>
                        	<div class="ml80">
                        		<button type="button" class="btn btn-primary btn-lg" onclick="saveQuestion()"> 添加题目 </button>
                        		<button type="button" class="btn btn-primary btn-lg" onclick="backQuestion()"> 返回题库 </button>
                        	</div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<script>
    /*去tm的thymeleaf，只能祭出jq了？*/
    var subjects = "[[${subjects}]]";
    var subjectsObj = JSON.parse(subjects.replace(/&quot;/g, '"'));
    var html='<option value="">请选择</option>';
    $.each(subjectsObj,function (i,item) {
    	if(item!=null){
            html+='<option value="'+item.id+'">'+item.name+'</option>';
        }else{
        	html='<option value="">请添加课程</option>';
        }
    });
    $("#subject-select").html(html);
	
	
    $('.radioItem input').on('ifChecked',function(event){
		if(event.type == 'ifChecked'){
			var i = $('input:radio[name="questionType"]:checked').val();
			if(i == 2 || i == 3){
				document.getElementById("option-group").style.display="none";//隐藏	
			}else{
				document.getElementById("option-group").style.display="";//显示
				}
			}
        }).iCheck({
        checkboxClass: 'icheckbox_minimal-blue',
        radioClass: 'iradio_minimal-blue',
    });
	
    var simplemde = new SimpleMDE({
        // textarea的DOM对象
        element: document.getElementById("questionField"),
        // 自动下载FontAwesome，设为false为不下载(如果设为false则必须手动引入)
        autoDownloadFontAwesome: false,
        placeholder: "这里请输入题干无法展示的内容（代码或者图表），没有请忽略。",
        autosave: {
            // 启用自动保存功能
            enabled: true,
            // 自动保存的间隔，以毫秒为单位。默认为10000（10s）
            delay: 15000,
            // 唯一的字符串标识符(保证每个SimpleMDE编辑器的uniqueId唯一)
            uniqueId: "editor-1"
        },
        renderingConfig: {
            // 如果设置为true，将使用highlight.js高亮显示。默认为false
            codeSyntaxHighlighting: true
        },
        showIcons: ["code", "table", "clean-block", "horizontal-rule"],
        tabSize: 4,
        // 编辑器底部的状态栏
        status: true,
        status: [ "lines", "words"] // Optional usage
    });

    function  saveQuestion() {
        if(doValidForm(questionForm)){
            Core.confirm("确认保存题目？",function () {
                var contentMd=simplemde.value();
                $("#questionContent").val(simplemde.markdown(contentMd));
                Core.postAjax("/question/add",$("#questionForm").serialize(),function (data) {
                    if(data.status=200){
                        simplemde.clearAutosavedValue();
                        Core.load("#content","question/add");
                    }
                    layer.msg(data.msg)
                })
            })
        }
    };
    
    function backQuestion(){
    	window.location.href="#questions";
    }
</script>